<template>
  <!-- 销售表现 -->
  <view class="salesperformance-wrap">
    <view class="filter-section" :style="{zIndex: zIndex1}">
      <u-dropdown @open="open1('zIndex1')" @close="close1('zIndex1')" >
        <u-dropdown-item v-model="shopStaffId" :title="shopStaffTit" :options="shopStaffList"
          @change="handleChange1"></u-dropdown-item>
        <u-dropdown-item v-model="dateType" :title="dataTypeTit" :options="dateTypeList"
          @change="handleChange"></u-dropdown-item>
      </u-dropdown>
    </view>

    <view class="salesperformance-sales">
      <view class="salesperformance-sales-content">
        <view class="flex justify-between items-center">
          <view class="salesperformance-sales-tit">销售表现</view>

        </view>
        <view class="salesperformance-sales-items">
          <view class="sitem" v-for="(item, index) in salesListInfo" :key="index">
            <view class="sitem-tit">{{ item.name }}</view>
            <view class="sitem-nums">{{ item.value }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="salesperformance-sales">
      <view class="salesperformance-sales-content">
        <view class="">
          <view class="salesperformance-sales-tit">销售额</view>
          <view class="box">
            <JnChart canvasId="line" :option="optionLine1" lazyLoad @init="handleInit1" />
          </view>
        </view>
      </view>
    </view>
    <view class="salesperformance-sales">
      <view class="salesperformance-sales-content">
        <view class="">
          <view class="salesperformance-sales-tit">成交单数</view>
          <view class="box">
            <JnChart canvasId="line1" :option="optionLine2" lazyLoad @init="handleInit2" />
          </view>
        </view>
      </view>
    </view>
    <view class="salesperformance-sales">
      <view class="salesperformance-sales-content">
        <view class="">
          <view class="salesperformance-sales-tit">成交件数</view>
          <view class="box">
            <JnChart canvasId="line2" :option="optionLine3" lazyLoad @init="handleInit3" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { shopApi } from "@/api";
import { getStorage, setStorage } from "@/utils/storage";
import JnChart from './components/jn-chart/index.vue'

let zIndex1=ref(0)
const shopStaffId = ref(-1)
const dateType = ref(-1)
let shopStaffTit = ref('全部员工')
let dataTypeTit = ref('全部状态')
const shopStaffList = ref([])
const dateTypeList = ref([
  { label: '全部类型', value: -1 },
  { label: '今日', value: 1 },
  { label: '昨日', value: 2 },
  { label: '本周', value: 3 },
  { label: '上周', value: 4 },
  { label: '本月', value: 5 },
  { label: '上月', value: 6 },
  { label: '年累计', value: 7 },
  { label: '去年', value: 8 },
])

let shopName = ref('')
let salesListInfo = ref([{
  name: '销售额',
  value: ''
}, {
  name: '成交单数',
  value: ''
}, {
  name: '成交件数',
  value: ''
}])

const open1=()=>{
  zIndex1.value=99
}

const close1=()=>{
  zIndex1.value=0
}

// 获取下拉员工的数据
function getShopStaffList() {
  let params = {
    currentPage: 1,
    pageSize: 9999
  }
  shopApi.SHOPGETSTAFFLIST(params).then((res) => {
    if (res.code == 200) {
      shopStaffList.value = res.result.data.map(item=>{
        return{
          ...item,
          label:item.name,
          value:item.shopStaffId
        }
      })
      shopStaffList.value.unshift({
          label:'全部员工',
          value:-1,
          franchiseeName: "江南第三深情",
          isEnable: true,
          isOpaAuth: false,
          mobile: "13712345678",
          name: "z",
          province: "河南省",
          role: 2,
          roleName: "审核不通过",
          shopId: 9,
          shopName: "门店1",
          shopStaffId: 14,
      })
    } else {
      uni.showToast({ title: res.errMsg, icon: "none" });
    }
  });
}

// echarts的配置项
// 如果 option 是通过接口数据动态组成，建议给组件加上 lazyLoad 配置
const optionLine1 = ref({})
const optionLine2 = ref({})
const optionLine3 = ref({})

function getOption(datasource) {
  const { values, names } = datasource

  const option = {
    // 如果图表显示的很小，记得加上grid
    grid: {
      top: '5%',
      left: '5%',
      right: '5%',
      bottom: 0,
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      confine: true,
      formatter: (params) => {
        const { value, name } = params[0]

        return `自定义tooltip\n${value}\n${name}`
      }
    },
    xAxis: {
      type: 'category',
      data: names
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: values,
        type: 'line',
        smooth: true
      }
    ]
  };

  return option
}

function handleInit1(chart) {
  console.debug('@line chart 实例对象 = ', chart)
}

function handleInit2(chart) {
  console.debug('@line chart 实例对象 = ', chart)
}

function handleInit3(chart) {
  console.debug('@line chart 实例对象 = ', chart)
}

const getData = () => {
  let params = {
  };
  if (shopStaffId.value != -1) {
    params.shopStaffId = shopStaffId.value
  }
  if (dateType.value != -1) {
    params.dateType = dateType.value
  }
  shopApi.SHOPGETINDEXSALESDATA(params).then((res) => {
    if (res.code == 200) {
      setTimeout(() => {
        salesListInfo.value[0].value = res.result.salesAmount?res.result.salesAmount:'-' //销售金额
        const data1 = {
          names: res.result.salesAmountList&&res.result.salesAmountList.length>0?res.result.salesAmountList.map(item => item.name):[],
          values: res.result.salesAmountList&&res.result.salesAmountList.length>0?res.result.salesAmountList.map(item => item.count):[]
        }
        optionLine1.value = getOption(data1)
        salesListInfo.value[1].value = res.result.orderCount?res.result.orderCount:'-' //成交单数
        const data2 = {
          names: res.result.orderCountList&&res.result.orderCountList.length>0?res.result.orderCountList.map(item => item.name):[],
          values: res.result.orderCountList&&res.result.orderCountList.length>0?res.result.orderCountList.map(item => item.count):[]
        }
        optionLine2.value = getOption(data2)
        salesListInfo.value[2].value = res.result.productCount?res.result.productCount:'-' //成交单数
        const data3 = {
          names: res.result.productCountList&&res.result.productCountList.length>0?res.result.productCountList.map(item => item.name):[],
          values: res.result.productCountList&&res.result.productCountList.length>0?res.result.productCountList.map(item => item.count):[]
        }
        optionLine3.value = getOption(data3)

      }, 800)
    } else {
      uni.showToast({
        title: res.errMsg,
        icon: "success"
      });
    }
  });
};

const handleChange = (value) => {
  dateType.value = value
  dataTypeTit.value = dateTypeList.value.find(item => item.value === value).label
  getData()
}

const handleChange1 = (value) => {
  shopStaffId.value = value
  shopStaffTit.value = shopStaffList.value.find(item => item.value === value).label
  getData()
}
onLoad(async () => {
  shopName.value = getStorage("shopName");
  getShopStaffList()
  getData()
  
});
onMounted(getData)
</script>

<style lang="scss">
page {
  background-color: #f3f3f3;
}
</style>
<style lang="scss" scoped>
.salesperformance-wrap {

  .filter-section {
    background-color: #fff;
    border-bottom: 2rpx solid #eee;
  }

  .box {
    width: 100%;
    height: 400rpx;

  }

  .salesperformance-top {
    background-color: #fff;
    padding: 24rpx;
    box-sizing: border-box;
    margin-bottom: 12rpx;

    .salesperformance-top-left {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      color: rgba(0, 0, 0, 0.6);
      margin-bottom: 30rpx;
    }

    .salesperformance-top-tit {
      font-family: PingFang SC;
      font-size: 18px;
      font-weight: 400;
      line-height: 26px;
      text-align: left;
      color: rgba(0, 0, 0, 0.9)
    }
  }

  .salesperformance-sales {
    padding: 24rpx;
    box-sizing: border-box;

    .salesperformance-sales-content {
      background-color: #fff;
      padding: 24rpx;
      box-sizing: border-box;
      border-radius: 16rpx;
    }

    .chevronright {
      width: 32rpx;
      height: 32rpx;
    }

    .salesperformance-sales-tit {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      text-align: left;
      color: #000000;
      margin-bottom: 12rpx;
    }

    .salesperformance-sales-items {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx;
      box-sizing: border-box;

      .sitem {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        text-align: center;
        color: #000000;

        .sitem-tit {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
          text-align: center;
          color: rgba(0, 0, 0, 0.6);
          margin-bottom: 24rpx;
        }

        .sitem-nums {
          font-family: PingFang SC;
          font-size: 16px;
          font-weight: 600;
          line-height: 24px;
          text-align: center;
          color: rgba(0, 0, 0, 0.9);

        }
      }
    }
  }
}
</style>
